<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/init.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Web Projects</title>
</head>
<body>
    <div class="content">
        <nav class="nav">
            <div class="container">
                <picture class="logo">
                    <source srcset="img/logo.png" media="(min-width: 800px)">
                    <img src="img/logo.png" alt="logo">
                </picture>
                <ul>
                    <li><a href="#" class="home">home</a></li>
                    <li> <a href="#" class="projects">projects</a></li>
                    <li> <a href="#" class="about">about</a></li>
                </ul>
            </div>
        </nav>
        <header class="welcome">
            <div class="container">
                <h1>欢迎</h1>
                <h2>
                    只用HTML5、CSS和JavaScript构建的小项目。没有JS或CSS框架，没有库等
                </h2>
            </div>
        </header>
        <article class="projects">
            <div>
                <img src="/img/project_img/1.png" alt="music player">
                <div class="cover">
                    <h4>Music Player</h4>
                    <p>简单的音乐播放器</p>
                    <a href="projects/music_player/index.html" target="_blank" class="btn">Live Demo</a>
                </div>
            </div>
            <div>
                <img src="/img/project_img/2.png" alt="move set booking">
                <div class="cover">
                    <h4>Move Set Booking</h4>
                    <p>影院选座界面</p>
                    <a href="projects/movie_seat_booking/index.html" target="_blank" class="btn">Live Demo</a>
                </div>
            </div>
            <div>
                <img src="/img/project_img/4.png" alt="memory card">
                <div class="cover">
                    <h4>Memory Card</h4>
                    <p>记忆卡片</p>
                    <a href="projects/memory_card/index.html" target="_blank" class="btn">Live Demo</a>
                </div>
            </div>
            <div>
                <img src="/img/project_img/5.png" alt="form validator">
                <div class="cover">
                    <h4>Form Validator</h4>
                    <p>表单验证</p>
                    <a href="projects/form_validator/index.html" target="_blank" class="btn">Live Demo</a>
                </div>
            </div>
            <div>
                <img src="/img/project_img/6.png" alt="meal finder">
                <div class="cover">
                    <h4>Meal Finder</h4>
                    <p>搜索食物</p>
                    <a href="projects/meal_finder/index.html" target="_blank" class="btn">Live Demo</a>
                </div>
            </div>
            <div>
                <img src="/img/project_img/7.png" alt="expense tracker">
                <div class="cover">
                    <h4>Expense Tracker</h4>
                    <p>记账</p>
                    <a href="projects/expense-tracker/index.html    " target="_blank" class="btn">Live Demo</a>
                </div>
            </div>
        </article>
        <footer class="footer">
            <div class="container">
                <p class="end_text">thanks</p>
            </div>
        </footer>
    </div>
</body>
</html>